#chart {
width: 820px;
height: 700px;
background: #bbb;
margin: 1px auto;
position: relative;
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
}
h2{
	text-align:center
}
text {
	pointer-events: none;
}

.grandparent text { /* header text */
	font-weight: bold;
	font-size: medium;
	font-family: "Open Sans", Helvetica, Arial, sans-serif; 
}

rect {
fill: none;
stroke: #fff;
}

rect.parent,
	.grandparent rect {
		stroke-width: 2px;
	}

.grandparent rect {
fill: #fff;
}

.children rect.parent,
	.grandparent rect {
cursor: pointer;
	}

rect.parent {
	pointer-events: all; 
}

.children:hover rect.child,
	.grandparent:hover rect {
fill: #aaa;
	}

.textdiv { /* text in the boxes */
	font-size: x-small;
padding: 5px;
	 font-family: "Open Sans", Helvetica, Arial, sans-serif; 
	 color:white;
}